<template>
  <view class="index-page">
    <!-- 顶部搜索栏 -->
    <view class="search-section">
      <search-bar placeholder="搜索课程、视频、商品..." @search="handleSearch" />
    </view>
    
    <!-- 轮播图 -->
    <swiper class="banner-swiper" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(banner, index) in banners" :key="index">
        <image class="banner-img" :src="banner.image" mode="aspectFill" />
      </swiper-item>
    </swiper>
    
    <!-- 推荐课程 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">推荐课程</text>
        <text class="more-btn" @click="goToCourses">更多 ></text>
      </view>
      <view class="course-list">
        <view 
          v-for="course in recommendCourses" 
          :key="course.id"
          class="course-item"
          @click="goToCourseDetail(course.id)"
        >
          <image class="course-cover" :src="course.cover" mode="aspectFill" />
          <view class="course-info">
            <text class="course-title">{{ course.title }}</text>
            <text class="course-instructor">{{ course.instructor }}</text>
            <view class="course-price">
              <text class="current-price">¥{{ course.price }}</text>
              <text class="original-price">¥{{ course.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 热门视频 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门视频</text>
        <text class="more-btn" @click="goToVideos">更多 ></text>
      </view>
      <scroll-view class="video-scroll" scroll-x="true">
        <view class="video-list">
          <view 
            v-for="video in hotVideos" 
            :key="video.id"
            class="video-item"
            @click="goToVideo(video.id)"
          >
            <image class="video-cover" :src="video.cover" mode="aspectFill" />
            <text class="video-title">{{ video.title }}</text>
            <text class="video-author">{{ video.author }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 热门商品 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门商品</text>
        <text class="more-btn" @click="goToShop">更多 ></text>
      </view>
      <view class="product-list">
        <view 
          v-for="product in hotProducts" 
          :key="product.id"
          class="product-item"
          @click="goToProductDetail(product.id)"
        >
          <image class="product-image" :src="product.image" mode="aspectFill" />
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <view class="product-price">
              <text class="current-price">¥{{ product.price }}</text>
              <text class="original-price">¥{{ product.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import SearchBar from '../../components/SearchBar.vue'

// 轮播图数据
const banners = ref([
  { image: 'https://via.placeholder.com/750x300/ff6b35/ffffff?text=精品课程' },
  { image: 'https://via.placeholder.com/750x300/ff8c42/ffffff?text=限时特价' },
  { image: 'https://via.placeholder.com/750x300/ffa726/ffffff?text=新品上市' }
])

// 推荐课程
const recommendCourses = ref([
  {
    id: 1,
    title: 'Vue3 + TypeScript 实战课程',
    instructor: '张老师',
    price: 299,
    originalPrice: 399,
    cover: 'https://via.placeholder.com/300x200/ff6b35/ffffff?text=Vue3'
  },
  {
    id: 2,
    title: 'UI/UX 设计从入门到精通',
    instructor: '李老师',
    price: 199,
    originalPrice: 299,
    cover: 'https://via.placeholder.com/300x200/ff6b35/ffffff?text=UI设计'
  }
])

// 热门视频
const hotVideos = ref([
  {
    id: 1,
    title: 'Vue3 响应式原理讲解',
    author: '前端大神',
    cover: 'https://via.placeholder.com/200x300/ff6b35/ffffff?text=视频1'
  },
  {
    id: 2,
    title: 'UI设计趋势分析',
    author: '设计师小李',
    cover: 'https://via.placeholder.com/200x300/ff6b35/ffffff?text=视频2'
  },
  {
    id: 3,
    title: '营销策略实战案例',
    author: '营销达人',
    cover: 'https://via.placeholder.com/200x300/ff6b35/ffffff?text=视频3'
  }
])

// 热门商品
const hotProducts = ref([
  {
    id: 1,
    name: 'iPhone 15 Pro Max',
    price: 9999,
    originalPrice: 10999,
    image: 'https://via.placeholder.com/300x300/ff6b35/ffffff?text=iPhone'
  },
  {
    id: 2,
    name: '时尚休闲T恤',
    price: 89,
    originalPrice: 129,
    image: 'https://via.placeholder.com/300x300/ff6b35/ffffff?text=T恤'
  }
])

const handleSearch = (keyword) => {
  console.log('搜索:', keyword)
  uni.showToast({ title: `搜索: ${keyword}`, icon: 'none' })
}

const goToCourses = () => {
  uni.switchTab({ url: '/pages/CoursePage/CoursePage' })
}

const goToVideos = () => {
  uni.switchTab({ url: '/pages/VideoPage/VideoPage' })
}

const goToShop = () => {
  uni.switchTab({ url: '/pages/ShopPage/ShopPage' })
}

const goToVideo = (videoId) => {
  uni.switchTab({ url: '/pages/VideoPage/VideoPage' })
}

const goToCourseDetail = (courseId) => {
  uni.navigateTo({ url: `/pages/CourseDetailPage/CourseDetailPage?courseId=${courseId}` })
}

const goToProductDetail = (productId) => {
  uni.switchTab({ url: '/pages/ShopPage/ShopPage' })
}
</script>

<style scoped>
.index-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 140rpx; /* 增加底部padding，确保不被tabBar遮挡 */
}
.search-section {
  background: #ff6b35;
  padding: 20rpx;
}
.banner-swiper {
  height: 300rpx;
}
.banner-img {
  width: 100%;
  height: 100%;
}
.section {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.more-btn {
  font-size: 24rpx;
  color: #999;
}
.course-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.course-item {
  display: flex;
  background: #f8f8f8;
  border-radius: 20rpx;
  overflow: hidden;
}
.course-cover {
  width: 200rpx;
  height: 150rpx;
  flex-shrink: 0;
}
.course-info {
  flex: 1;
  padding: 20rpx;
}
.course-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.course-instructor {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}
.course-price {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
.current-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b35;
}
.original-price {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}
.video-scroll {
  white-space: nowrap;
}
.video-list {
  display: flex;
  gap: 20rpx;
}
.video-item {
  width: 200rpx;
  flex-shrink: 0;
}
.video-cover {
  width: 200rpx;
  height: 300rpx;
  border-radius: 20rpx;
  margin-bottom: 15rpx;
}
.video-title {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-author {
  font-size: 22rpx;
  color: #666;
  display: block;
}
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.product-item {
  display: flex;
  background: #f8f8f8;
  border-radius: 20rpx;
  overflow: hidden;
}
.product-image {
  width: 150rpx;
  height: 150rpx;
  flex-shrink: 0;
}
.product-info {
  flex: 1;
  padding: 20rpx;
}
.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}
.product-price {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
</style>
